<template>
  <div style="width: 95%;margin: 0 auto;">
    <el-form v-show="showSearch" :inline="true" :model="searchForm" class="demo-form-inline" size="small"
      label-suffix="：">
      <el-form-item label="字典名称">
        <el-input v-model="searchForm.itemText" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <!-- @change="reqTableData(1)"  -->
        <el-select clearable v-model="searchForm.status" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 操作组件 -->
    <!-- 操作 -->
    <div class="dis-o-between operate-line">
      <div>
        <el-button icon="el-icon-plus" plain type="primary" @click="add" size="small">新增</el-button>
        <el-button icon="el-icon-search" type="primary" @click="reqTableData(1)" size="small">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetReq()" size="small">重置</el-button>
      </div>
      <RightToolbar :showSearch.sync="showSearch" @queryTable="reqTableData(1)"></RightToolbar>
    </div>
    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" :row-style="tableRowClassName">
      <el-table-column label="字典名称" align="center" prop="itemText"></el-table-column>
      <el-table-column label="数据值" align="center" prop="itemValue"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button size="small" type="text" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <paginationCom :pagination="pagination" @handleSizeChange="handleSizeChange"
      @handleCurrentChange=handleCurrentChange>
    </paginationCom>

    <el-dialog v-dialogDrag:title="title" :visible.sync="dialogVisible" width="40%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="名称" prop="itemText">
          <el-input v-model="ruleForm.itemText"></el-input>
        </el-form-item>
        <el-form-item label="数据值" prop="itemValue">
          <el-input v-model="ruleForm.itemValue"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" rows="3" v-model="ruleForm.description"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input type="number" v-model="ruleForm.sortOrder"></el-input>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch active-text="启用" v-model="ruleForm.qiYong"></el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ziDianLieBiao",
  data() {
    return {
      showSearch: true,
      loading: false,
      searchForm: {},
      tableData: [],
      options: [{
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '不启用'
      }],
      pagination: {
        total: 100,
        per_page: 10,
        from: 1,
        to: 0,
        current_page: 1, //当前页数
      },
      title: '',
      ruleForm: {

      },
      rules: {
        itemText: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        itemValue: [
          { required: true, message: '请输入数据值', trigger: 'blur' }
        ],
      },
      dialogVisible: false,
    };
  },
  props: ['lieBiaoData'],
  watch: {
    'lieBiaoData': {
      immediate: true,
      handler(val) {
        this.reqTableData(1)
      }
    }
  },
  components: {},
  methods: {
    tableRowClassName({ row, rowIndex }) {
      console.log(row)
      if (row.status === 0) {
        return {
          background: '#f4f4f4',
          color: '#bababa'
        };
      } else {
        return {}
      }

    },
    resetReq() {
      this.searchForm = {};
      this.reqTableData(1);
    },
    reqTableData(page) {
      if (page) {
        this.pagination.current_page = page
      }
      this.loading = true;
      let data = {
        pageNum: this.pagination.current_page,
        pageSize: this.pagination.per_page,
        dictUuid: this.lieBiaoData.dictUuid,
        ...this.searchForm
      }
      this.sendGet('/dictItem/getDictItemPage', data).then(res => {
        if (res.errcode == 0) {
          this.tableData = res.data.list
          this.pagination.total = res.data.total
        }
        this.loading = false;
      })
    },
    // 分页器----新每页条数
    handleSizeChange(val) {
      this.pagination.per_page = val;
      this.reqTableData(1);
    },
    // 分页器-----新当前页
    handleCurrentChange(val) {
      this.pagination.current_page = val;
      this.reqTableData();
    },
    add() {
      this.title = '新增字典'
      this.ruleForm = {
        dictUuid: this.lieBiaoData.dictUuid,
        qiYong: true
      }
      this.dialogVisible = true;
    },
    edit(row) {
      this.title = '编辑字典'
      this.ruleForm = JSON.parse(JSON.stringify(row))
      this.$set(this.ruleForm, 'qiYong', row.status == 0 ? false : true)
      console.log(this.ruleForm)
      delete this.ruleForm.status
      this.dialogVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm.qiYong)
          let data = {
            status: this.ruleForm.qiYong === true ? 1 : 0,
            ...this.ruleForm,
          }
          this.sendPost('/dictItem/saveOrUpdate', data).then(res => {
            if (res.errcode === 0) {
              this.suc({ message: res.errmsg });
              this.ruleForm = {};
              this.reqTableData(1)
              this.dialogVisible = false;
            } else {
              this.err({ message: res.errmsg });
            }
          })
        } else {
          return false;
        }
      });
    },
    del(row) {
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sendGet('/dictItem/deleteById', { id: row.id }).then(res => {
          if (res.errcode === 0) {
            this.suc({ message: res.errmsg });
          }
          this.reqTableData()
        })
      })
    },
  },
  computed: {},

  created() {

  },
  mounted() {


  },
  beforeDestroy() {

  },
  destroyed() {
  },
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped></style>